<template>
  <!-- 工作台 -->
  <div class="wh100">
    <workBenchSingle v-if="isOneProject"></workBenchSingle>
    <workBenchMore v-else></workBenchMore>
  </div>
</template>
<script>
import workBenchSingle from './workBench-single';
import workBenchMore from './workBench-more'
import store from '@/store'
export default {
  name: 'workBench',
  components: {
    workBenchSingle,
    workBenchMore
  },
  computed: {
    projectId() {
      return this.$store.state.settings.changeHeaderProject
    }
  },
  watch: {
    projectId: {
      immediate: true,
      handler: function(val) {
        if (val || this.projectlen == 0) {
          this.isOneProject = true
        } else {
          this.isOneProject = false
        }
      }
    }
  },
  data() {
    return {
      isOneProject: true,
      projectlen: '',
    };
  },
  created() {
    this.getProjectList()
  },
  methods: {
    getProjectList() {
      console.log("获取列表==")
      this.$httpGet("/buss/commonAPI/getProjectList").then(res => {
        if (res.code === 200) {
          let arr = res.data.filter(e => e.id !== '')
          this.projectlen = arr.length
          if (this.projectId || this.projectlen == 0) {
            this.isOneProject = true
          } else {
            this.isOneProject = false
          }
        } else {
          this.$messageError('获取项目下拉列表失败')
        }
      }).catch(err => {
        console.log(err)
        this.$messageError('获取项目下拉列表失败')
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/function.scss";
@import "~@/assets/styles/homepage.scss";
.leftPart {
  width: 638px;
  margin-right: 24px;
  .leftconext {
    height: 100%;
    padding-bottom: 5px;
  }
}
.rightPart {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.todo_center_head {
  height: 100%;
  display: flex;
  .txt_tab {
    font-size: 16px;
    font-weight: 500;
    color: rgba(44, 44, 44, 0.36);
    margin-right: 57px;
    cursor: pointer;
    position: relative;
    margin-top: px_2_vh(18px);
    &.active {
      color: #2c2c22;
      border-bottom: 3px solid #1763ff;
    }
  }
}
.todo_center_content {
  height: 100%;
  width: 100%;
  padding: 0 33px;
  box-sizing: border-box;
}
.todo_item {
  background: #f8f8f8;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  border: 2px solid transparent;
  box-sizing: border-box;
  padding: 14px 16px;
  margin-bottom: 20px;
  .name {
    font-size: 15px;
    color: #2e384d;
    font-family: Microsoft YaHei;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 25px;
  }
  .mr31 {
    margin-right: 31px;
  }
  .mb19 {
    margin-bottom: 10px;
  }
  .name2 {
    font-size: 12px;
    font-family: Microsoft YaHei;
    color: rgba(46, 56, 77, 0.46);
    margin-bottom: 4px;
  }
  .model {
    font-size: 12px;
    color: #2e384d;
    font-family: X-xiheiti;
    margin-bottom: 4px;
  }
  // .model2 {
  //   font-size: 12px;
  //   font-family: Microsoft YaHei;
  //   color: #9ba0a9;
  // }
  .notice_top {
    max-width: 26vw;
  }
  .btn {
    width: 91px;
    font-size: 14px;
    color: white;
    border-radius: 7px;
    background-color: #2e5bff;
    padding: 8px 15px;
    text-align: center;
    box-sizing: border-box;
    &.green {
      background-color: rgba(33, 190, 39, 1);
    }
  }
  &:hover {
    border-color: #2e5bff;
    .name,
    .model {
      color: #2e5bff;
    }
    .name2,
    .model2 {
      color: rgba(46, 91, 255, 0.47);
    }
  }
  .warnF {
    font-size: 16px;
    font-weight: normal;
    color: #3d3d3d;
    margin-bottom: 11px;
  }
}
.title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1c1e24;
  height: 100%;
  padding-right: 24px;
  box-sizing: border-box;
}
.project_month {
  ::v-deep {
    .el-date-editor.el-input {
      width: 160px;
      cursor: pointer;
    }
    .el-input__inner {
      text-align: right;
      height: 30px;
      line-height: 30px;
      padding-right: 10px;
    }
    .el-input__icon {
      line-height: 30px;
    }
  }
  .construct_body {
    display: flex;
    justify-content: space-around;
    height: 100%;
    position: relative;
    padding: 0 20px 20px 24px;
    box-sizing: border-box;
    .item {
      width: 32%;
      background-color: #f8f8f8;
      border-radius: 15px;
      padding: 12px;
      box-sizing: border-box;
      .detail {
        width: 50%;
      }
      .detail-title {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #333333;
        margin-bottom: 5px;
      }
      .detail-number {
        min-height: 32px;
        font-size: 32px;
        font-family: DIN-Bold, DIN;
        font-weight: bold;
      }
      .colorBlue {
        color: #105cdd;
      }
      .colorGreen {
        color: #429f21;
      }
      .item-middle {
        margin-top: 13px;
        margin-bottom: 24px;
        .percent-title {
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          color: #333333;
        }
        ::v-deep {
          .el-progress-bar {
            padding-right: 50px;
            margin-right: -50px;
          }
          .el-progress-bar__inner {
            background-color: unset;
            background-image: linear-gradient(
              270deg,
              #2c79fa 0%,
              rgba(44, 121, 250, 0.18) 100%
            );
            border-radius: 0px 8px 8px 0px;
            opacity: 0.93;
          }
          .el-progress__text {
            width: 50px;
            font-size: 14px !important;
            margin-left: 0px;
            text-align: right;
          }
        }
      }
      .item-bottom {
        .project-info {
          margin-bottom: 10px;
          // &:last-child {
          //   margin-bottom: 0;
          // }
          img {
            width: 26px;
            height: 14px;
            display: block;
          }
          .name {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            color: #333333;
            margin-right: 170px;
            margin-left: 10px;
          }
          .percent {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            color: #000000;
            line-height: 1;
            margin-left: 10px;
            margin-top: 3px;
          }
        }
      }
    }
  }
}
.centerSec {
  margin: 20px 0;
  height: 230px;
}
.warn {
  min-height: 100px;
  ::v-deep .card_body {
    overflow: auto;
  }
  .todo_center_head {
    width: 100%;
    justify-content: space-between;
    padding-right: 24px;
  }
  .more {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    margin-top: px_2_vh(18px);
    cursor: pointer;
  }
  .todo_center_content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .todo_item {
    width: calc((100% - 16px) / 2);
  }
}
.empty_content {
  .emptyImg {
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto 10px;
  }
  .tipTitle {
    text-align: center;
  }
}
</style>
